<template>
  <div class="marketing-tool">
    <header>营销工具</header>
    <div>
      <div>
        <img />
        <div>活动内裤卡</div>
        <div>查看、设置内裤卡</div>
        <div>
          <button class="open">开启</button>
          <button @click="active = true">更多</button>
        </div>
      </div>
    </div>
  </div>
  <n-drawer class="marketing-tool-drawer" v-model:show="active" width="89.11%">
    <n-drawer-content body-style="--n-body-padding:0;" style="--n-header-border-bottom:none" closable>
      <template #header>
        <div class="my-title--primary">内裤卡设置</div>
      </template>
      <div class="marketing-tool-drawer__content">
        <button @click="showModal = true">添加内裤卡</button>
        <n-data-table :columns="columns" :data="data" :max-height="827" striped />
      </div>
    </n-drawer-content>
  </n-drawer>
  <n-modal v-model:show="showModal" class="underwear-card-model" preset="card" style="width: 866px;height: 520px;"
    :bordered="false" :to="'.marketing-tool-drawer__content'">
    <template #header>
      <div class="my-title--primary">添加内裤卡</div>
    </template>
    <n-form :model="form" :rules="rulesForm" label-placement="left" label-width="auto" require-mark-placement="right"
      :show-require-mark="true">
      <n-form-item label="内裤卡售价" label-width="auto">
        <n-input v-model:value="form.price" placeholder="请输入内裤卡售价" />
      </n-form-item>
      <n-form-item label="领取次数" label-width="auto">
        <n-input v-model:value="form.getNumber" placeholder="请输入领取次数" />
      </n-form-item>
      <n-form-item label="是否开启在售" label-width="auto">
        <n-switch v-model:value="form.isOpen" />
      </n-form-item>
    </n-form>
    <template #footer>
      <div class="my-btn--primary" @click="showModal = false">确认</div>
    </template>
  </n-modal>
</template>
<script setup>
import tableRow from './@fragment/table-row.vue'
import { ref, h } from 'vue';
const active = ref(false);
const columns = [
  {
    title: '内裤卡售价/次数',
    key: 'price',
    render() {
      return h(tableRow, {
        price: true
      })
    }
  },
  {
    title: '已售内裤卡(张)',
    key: 'sold'
  },
  {
    title: '购买人数(人)',
    key: 'peopleBuy'
  },
  {
    title: '已领取(条)',
    key: 'get'
  },
  {
    title: '待领取(条)',
    key: 'unclaimed'
  },
  {
    title: '是否开启在售',
    key: 'isPpen',
    render(row) {
      return h(tableRow, {
        isOpen: row.isOpen
      })
    }
  }
], data = Array.from({ length: 46 }).map((_, index) => ({
  key: index,
  price: '',
  sold: 0,
  peopleBuy: 0,
  get: 0,
  unclaimed: 0,
  isOpen: false
}));

const showModal = ref(false);
const form = ref({
  price: null,
  getNumber: null,
  isOpen: false
});
const rulesForm = ref({
  price: { required: true },
  getNumber: { required: true },
})
</script>
<style lang="less" scoped>
.marketing-tool {
  margin: 0 30px;

  * {
    line-height: 1;
  }

  >header {
    padding: 30px 0 28px;
    font-size: 28px;
    font-weight: bold;
    color: #2E323D;
  }

  >div {
    display: grid;
    grid-template-columns: repeat(auto-fill, 310px);
    grid-auto-rows: 366px;
    grid-gap: 30px 30px;

    >div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border: 1px solid #E5E5E5;
      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;

      >img {
        display: block;
        margin: 35px 0 37px;
        width: 126px;
        height: 125px;

      }

      >img+div {
        margin-bottom: 15px;
        font-size: 30px;
        font-weight: bold;
        color: #333;
      }

      >img+div+div {
        margin-bottom: 28px;
        font-size: 24px;
        color: #4A5060;
      }

      >div:last-child {
        margin-bottom: 30px;

        >button {
          width: 116px;
          height: 44px;
          font-size: 24px;
          border-radius: 4px;
        }

        >.open,
        .close {
          margin-right: 18px;
          background: #1981F4;
          color: #FFF;
        }

        .close {
          background: #EC3F14;
        }

        >button:last-child {
          background: #F8F8F8;
          color: #666;
          border: 1px solid #E5E5E5;
          border-radius: 4px;
        }
      }
    }
  }
}

.marketing-tool-drawer__content {
  padding: 0 30px;
  box-sizing: border-box;

  >button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    width: 220px;
    height: 60px;
    font-size: 26px;
    font-weight: 400;
    color: #FFF;
    background: #1981F4;
    border-radius: 5px;
  }

  /deep/.n-data-table {
    .n-data-table-wrapper {
      .n-data-table-base-table {
        tbody>tr>td {
          &:first-child {
            padding: 0;
          }

          &:last-child {
            padding: 0;
          }
        }

      }
    }
  }

  /deep/ .n-form {
    .n-form-item {
      .n-form-item-label {
        font-size: 26px;
        color: #2E323D;
      }
    }

    .n-input {
      &__placeholder {
        color: #666;
      }
    }

    .n-switch {
      zoom: 1.55;

      &:focus .n-switch__rail {
        box-shadow: none;
      }

      &.n-switch--active {
        .n-switch__rail {
          background-color: #1ABD69;
        }
      }

      .n-switch__rail {
        background-color: #D8D8D8;
      }
    }
  }

  /deep/ .n-card__footer {
    display: flex;
    justify-content: end;
  }
}

.underwear-card-model {
  .my-title--primary {
    display: flex;
    align-items: center;

    &::before {
      display: block;
      position: initial;
      margin-right: 12px;
    }
  }

  .my-btn--primary {
    height: 60px;
    font-size: 28px;
    line-height: 60px;
  }

}
</style>